
<template>
    <div class="upload">
        <el-upload v-loading="loading" :on-progress="progress" class="avatar-uploader" :ref="ref" :auto-upload="true" :disabled="disabled" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :data="{token:uptoken}">
            <img v-if="(chooseType==='00'||type==='00')&&(newFileUrl||fileUrl)" :src="newFileUrl||fileUrl" class="avatar">
            <!--<img v-else-if="(chooseType==='01'||type==='01')&&(newFileUrl||fileUrl)" :src="(newFileUrl||fileUrl)+'-thumbnail-2'" class="avatar">-->
            <span class="avatar decoding" v-else-if="(chooseType==='01'||type==='01')&&(newFileUrl)">正在解码中。。。</span>
        <d-player class="d-player avatar" v-else-if="(chooseType==='01'||type==='01')&&(newFileUrl||fileUrl)" :options="{autoplay:true,video:{url:(newFileUrl||fileUrl)+'.m3u8',pic:(newFileUrl||fileUrl)+'-thumbnail-2',type: 'hls'}}" ref="dplay"></d-player>

            <audid controls="controls" v-else-if="(chooseType==='02'||type==='02')&&(newFileUrl||fileUrl)" :src="newFileUrl||fileUrl" class="avatar"></audid>
            <i v-else-if="(type==='03')&&(newFileUrl||fileUrl)" :src="newFileUrl||fileUrl" class="el-icon-success avatar-uploader-icon"></i>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-progress v-if="!disabled&&percent" :percentage="percent"></el-progress>
    </div>
</template>

<script>
import conf from 'api/conf'
import io from 'api/io'
import VueDPlayer from 'vue-dplayer'
import '../../node_modules/vue-dplayer/dist/vue-dplayer.css'
export default {
    name: 'v-header',
    props: ['fileUrl', 'chooseType', 'disabled'],
    components: {
        "d-player":VueDPlayer
    },
    data() {
        return {
            showVideo: false,
            percent: 0,
            loading: false,
            uploadUrl: conf.qiniuBaseUrl,
            newFileUrl: "",
            uptoken: '',
            ref: 'ref' + (new Date().getTime()),
            type: ''   //type,图片：00;视频：01；音频：02；文件：03
        }
    },
    methods: {
        mounted() {

        },
        progress(event, file, fileList) {
            console.log(event, file, )
            this.percent = Math.round(event.percent)
        },
        handleAvatarSuccess(res, file) {
            this.loading = false
            this.$message('上传成功')
            let backUrl = 'http://static.yuyou100.com/' + res.url
            let duration = 0
            this.newFileUrl = backUrl;
            console.log(res.type)
            if (res.type.indexOf('image') > -1) {
                this.type = '00'
            } else if (res.type.indexOf('video') > -1) {
                this.type = '01'
                duration = res.avinfo.video.duration
            } else if (res.type.indexOf('audio') > -1) {
                this.type = '02'
                duration = res.avinfo.audio.duration
            } else {
                this.type = '03'
            }
            this.$emit('success', backUrl, (res.size / 1024 / 1024), duration)
        },
        async beforeAvatarUpload(file) {
            this.loading = true
            // setTimeout(()=> {
            //     this.loading=false
            // }, 20000);
            let qiniuUrl = conf.qiniuUploadTokenApi
            if (file.type.indexOf('video/') > -1) {
                qiniuUrl = conf.qiniuVideoUrl
            }
            let res = await io.get(qiniuUrl)
            this.uptoken = res.data.uptoken
            // const isJPG = file.type === 'image/jpeg';
            const isLt500M = file.size / 1024 / 1024 < 500;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt500M) {
                this.$message.error('文件大小不能超过 500MB!');
            }
            return isLt500M;
        },
    }
}
</script>

<style lang="stylus" scoped>
.decoding{
    line-height 178px
}
</style>

<style>
.upload {
    width: 180px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
